<template>
  <div class="overall-page page">
    <div class="overall-container">
      <div class="top-container">
        <div class="top-item">
          <el-row style="width: 100%;" class="mb21 cusHeight">
            <Card title="交通运输行业数据" :is-export="true" page="302">
              <PieCharts :source="pieSource" :loading="false"></PieCharts>
            </Card>
          </el-row>


          <el-row style="width: 100%;" class="mb2 cusHeight">
            <Card title="限上批零住餐企业情况" :is-export="true" :is-select="false" page="293">
              <BarCharts :bar-width="20" :grid="{ top: 40, bottom: 0, left: 20, right: 10 }" :source="mealList"
                :loading="false"></BarCharts>
            </Card>
          </el-row>
        </div>
        <div class="top-item1">
          <div id="serviceMap" class="chart"></div>
          <div class="map-tooltip" v-if="tooltipShow">
            <div class="map-tooltip-title">{{ cityName }}</div>
            <div style="position: absolute;right: 0;top:10px;width: 30px;height: 30px" @click="tooltipShow"></div>
            <div class="map-tooltip-content">
              <div class="tooltip-item" v-for="(item, index) in toolList" :key="index">
                <div class="value">
                  <span class="number">{{ item.value }}</span>
                  <span class="unit">{{ item.unit }}</span>
                </div>
                <div class="label">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-item">
          <el-row style="width: 100%;" class="mb2 cusHeight">
            <Card title="在库规上服务业企业情况" :is-export="true" page="298">
              <BarCharts :bar-width="20" :source="serviceList" :grid="{ top: 40, bottom: -10, left: 20, right: 10 }"
                :loading="false"></BarCharts>
            </Card>
          </el-row>

          <el-row style="width: 100%;" class="mb21 cusHeight">
            <Card title="社零指标情况" :is-export="true" :is-select="false" page="292">
              <BarCharts :bar-width="20" :source="socialList" :grid="{ top: 40, bottom: -30, left: 20, right: 10 }"
                :loading="false" :barWidth="15" :barRadius="[0,0,0,0]"></BarCharts>
            </Card>
          </el-row>
        </div>
      </div>
      <div class="info-block">
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="文化旅游产业发展路径分析" :is-export="true" page="296">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="1708.14万人次" text="旅游接待人数目标值"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="130.7亿元" text="旅游收入目标值"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">
                </el-col>
              </el-row>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="招商引资发展路径分析" :is-export="true" page="295">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="308.5亿元" text="总到位资金"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="246.8亿元" text="省外到位资金"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">
                </el-col>
              </el-row>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="三产服务业发展路径分析" :is-export="true" page="294">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="174.19亿" text="2023消费品零售额"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="2.15亿元" text="2023进出口总额"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">

                </el-col>
              </el-row>
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="20.9亿元" text="2024目标增加值"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="0.44亿元" text="2024进出口目标增加值"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">
                </el-col>
              </el-row>
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="公路里程" :is-export="true" page="302">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="2" text="国道数量"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="1" text="国家高速公路数量"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="1" text="省级高速数量"></CategoryProportion>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="232.892km" text="国道路段里程"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="109.156km" text="国家高速公路路段里程"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="40km" text="省级高速路段里程"></CategoryProportion>
                </el-col>
              </el-row>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="共享单车情况分析" :is-export="true" page="303">
              <BarCharts :bar-width="20" :source="bicycleList" :grid="{ top: 40, bottom: -10, left: 20, right: 10 }"
                :loading="false"></BarCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="出租车情况" :is-export="true" page="304">
              <BarCharts :bar-width="20" :source="taxiList" :grid="{ top: 40, bottom: -10, left: 20, right: 10 }"
                :loading="false"></BarCharts>
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="公交车情况" :is-export="true" page="304">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">

                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="154辆" text="目前运营车辆"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="23条" text="公交线路"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">

                </el-col>
              </el-row>
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="1407.73万人" text="客运量"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="99592张" text="一卡通发放量"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="10.86%" text="一卡通使用率"></CategoryProportion>
                </el-col>
              </el-row>

            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="房地产基本情况" :is-export="true" page="305">
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">

                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="65.82万㎡" text="商品房销售面积"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="11.5" text="房地产人员劳动报酬增速"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">

                </el-col>
              </el-row>
              <el-row :gutter="10" style="width: 100%;height:50%;padding: 10px 0">
                <el-col style="height: 100%" :span="4">

                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="60.17万㎡" text="商品房住宅可售面积"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="8">
                  <CategoryProportion number="18.12月" text="去库存周期"></CategoryProportion>
                </el-col>
                <el-col style="height: 100%" :span="4">

                </el-col>
              </el-row>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="房产销售情况（2023 年）" :is-export="true" page="306">
              <BarCharts :bar-width="10" :source="houseList" :grid="{ top: 40, bottom: -20, left: 20, right: 10 }"
                :loading="false"></BarCharts>
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="资质内建筑企业清单" :is-export="true" page="309">
              <TableComponent :headers="headers"
                :data="tableData.filter(item => item.selectId === tabId).map(item => item.list)[0]" />
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="A 级旅游景区" :is-export="true" page="315">
              <BarCharts :bar-width="20" :source="touristList" :grid="{ top: 40, bottom: 10, left: 20, right: 10 }"
                :loading="false"></BarCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="景区景点情况" :is-export="true" page="316">
              <TableComponent :headers="headers"
                :data="tableData2.filter(item => item.selectId === tabId).map(item => item.list)[0]" />
            </Card>
          </el-row>
        </div>
        <div class="info-container">
          <el-row class="info-item cusHeight">
            <Card title="文化底蕴基本情况分析" :is-export="true" page="329">
              <BarCharts :bar-width="10" :barWidth="20" :source="analysisOfTheBasicSituationOfCulturalHeritage"
                :grid="{ top: 40, bottom: -10, left: 20, right: 10 }" :loading="false"></BarCharts>
            </Card>
          </el-row>

          <el-row class="info-item cusHeight">
            <Card title="文物保护" :is-export="true" page="342">
              <BarCharts :bar-width="10" :barWidth="20" :source="artifactList"
                :grid="{ top: 40, bottom: -10, left: 20, right: 10 }" :loading="false"></BarCharts>
            </Card>
          </el-row>
          <el-row class="info-item cusHeight">
            <Card title="各类特色产品情况分析" :is-export="true" page="343">
              <BarCharts :bar-width="10" :barWidth="20" :source="productList"
                :grid="{ top: 40, bottom: -10, left: 20, right: 10 }" :loading="false"></BarCharts>
            </Card>
          </el-row>
        </div>
        <div class="info-container">

          <el-row class="info-item cusHeight">
            <Card title="区域设施情况分析" :is-export="true" page="394">
              <BarCharts :bar-width="10" :barWidth="20" :source="facilitiesList"
                :grid="{ top: 40, bottom: -10, left: 20, right: 10 }" :loading="false"></BarCharts>
            </Card>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Card from "@/components/Card/Card.vue";
import BarCharts from "@/components/Charts/Bar.vue";
import LineCharts from "@/components/Charts/Line";
import CategoryProportion from "@/components/CategoryProportion.vue";
import PieCharts from "@/components/Charts/Pie.vue";
import TableComponent from "@/components/TableComponent.vue";
import { staticImageToBase64 } from "@/utils/utils";
import geoJson from "@/assets/geo/suzhouqu.json";

export default {
  components: { TableComponent, LineCharts, PieCharts, CategoryProportion, BarCharts, Card },
  data() {
    return {
      charts: {
        serviceMap: null
      },
      list: [{ value: 1, label: 'cs' }],
      socialList: {
        xData: [
          "2021年社会消费品零售总额",
          "2022年社会消费品零售总额",
          "2023年社会消费品零售总额",
        ],
        yData: {
          '零售总额': [
            143.8,   // 总量(亿元)
            155.5,   // 总量(亿元)
            174.19,   // 总量(亿元)
          ]
        },
        yLabel: '总量(亿元)'
      },
      mealList: {
        xData: [
          "合计",
          "批发业",
          "零售业",
          "住宿业",
          "餐饮业"
        ],
        yData: {
          '企业情况': [
            142, // 合计(家)
            19, // 批发业
            83, // 零售业
            16, // 住宿业
            24 // 餐饮业 ];
          ]
        },
        yLabel: '单位：家'
      },
      serviceList: {
        xData: [
          "总计",
          "交通运输、仓储和邮政业",
          "信息传输、软件和信息技术服务业",
          "房地产业",
          "租赁和商务服务业",
          "科学研究和技术服务业",
          "水利、环境和公共设施管理业",
          "居民服务、修理和其他服务业",
          "文化、体育和娱乐业",
          "教育服务业"
        ],
        yData: {
          '企业情况': [
            45,   // 肃州区 - 总计
            8,    // 肃州区 - 交通运输、仓储和邮政业
            4,    // 肃州区 - 信息传输、软件和信息技术服务业
            1,    // 肃州区 - 房地产业
            17,   // 肃州区 - 租赁和商务服务业
            7,    // 肃州区 - 科学研究和技术服务业
            1,    // 肃州区 - 水利、环境和公共设施管理业
            4,    // 肃州区 - 居民服务、修理和其他服务业
            2,    // 肃州区 - 文化、体育和娱乐业
            1     // 肃州区 - 教育服务业
          ]
        },
        yLabel: '单位：户'
      },
      pieSource: [
        { name: '营运车辆', value: 3536 },
        { name: '营运车辆经营业户', value: 1336 },
        { name: '运输站场', value: 5 },
        { name: '客运班线', value: 51 },
      ],
      bicycleList: {
        xData: [
          "现有数量（辆）",
          "运行商（个）",
          "定点停车点（个）"
        ],
        yData: {
          '共享电动车': [
            6000,   // 共享电动车数量
            3,
            956
          ],
          '共享自行车': [
            6000,   // 共享电动车数量
            3,
            956
          ]
        },
        yLabel: ''
      },
      taxiList: {
        xData: [
          "酒泉丝路宏图交通建设发展有限责任公司",
          "酒泉市交运出租汽车有限责任公司",
          "酒泉亚飞永盛旅游汽车出租有限公司",
          "酒泉新运通出租汽车有限公司"
        ],
        yData: {
          '目前运营车辆': [
            150,   // 酒泉丝路宏图交通建设发展有限责任公司
            133,    // 酒泉市交运出租汽车有限责任公司
            200,    // 酒泉亚飞永盛旅游汽车出租有限公司
            40,    // 酒泉新运通出租汽车有限公司
          ],
        },
        yLabel: '单位：辆'
      },
      houseList: {
        xData: [
          "金泉湖畔小区项目（一期）",
          "巨龙金域御景项目",
          "巨龙庭院建设项目",
          "巨龙庭院住宅小区 4#地块",
          "春和万象住宅小区",
          "升科.酒泉智慧天宸住宅小区（二期）",
          "升科.酒泉智慧天宸住宅小区（一期）",
          "紫阳苑住宅小区建设项目（二期工程）",
          "紫阳苑住宅小区建设项目（三期）",
          "酒泉润千禧江山阅",
          "酒泉星云阁住宅小区建设项目",
          "酒泉奥特莱斯丝路小镇",
          "嘉鑫南苑建设项目",
          "蓝天郡府项目（一期）",
          "蓝天格三期项目",
          "水韵茗庭住宅小区",
          "酒泉市紫瑞苑住宅小区配套 1#楼",
          "常青华悦府",
          "碧华澜庭住宅小区",
          "奥泰苑住宅小区",
          "常青雅筑小区",
          "瀚海明珠住宅小区南区三期项目",
          "千禧涧庭小区项目",
          "瓜州县光明渊景学府住宅小区（一期）建设项目",
          "酒泉市光明玺园住宅小区",
          "光明玺悦住宅小区一期项目",
          "光明玺悦住宅小区三期项目",
          "祥瑞盛世华庭住宅小区",
          "祥瑞年华家园住宅小区",
          "福华龙门居（南区）住宅小区",
          "学府名庭住宅小区一期",
          "福华龙门住宅小区（二期）",
          "福华龙门居住宅小区（三期）",
          "福华龙门居住宅小区（一期）",
          "乔林庭院住宅小区",
          "敦煌市农商大厦A区建设项目",
          "肃州区和乐鑫园（酒泉监狱民警职工住宅小区）项目",
          "酒泉嘉美国际住宅小区一期",
          "酒泉红星美凯龙商业综合体一期建设项目",
          "左岸华府住宅小区",
          "金玉良苑住宅小区",
          "濠汇明珠住宅小区项目",
          "酒泉互联网商品贸易中心",
          "金河盛景住宅小区一期",
          "乾宏时代商业综合体",
          "润泽瑞锦住宅小区项目",
          // "世博南府二期工程项目",
          // "世博丽苑二期工程项目",
          // "天怡景苑住宅小区(四期) 工程",
          // "天怡景苑住宅小区(一期) 工程",
          // "紫苑小区",
          // "正火长河汉庭",
          // "中天岁月魔方项目",
          // "常青和悦府小区(一期)",
          // "月太云和居住宅小区项目",
          // "泉湖镇泉湖村9组城中村棚户区改造项目",
          // "肃州区西峰镇营门村七组城中村改造项目"
        ],
        yData: {
          "本年商品房销售面积（平方米）": [
            null,
            null,
            null,
            10821,
            10605,
            38573,
            null,
            5760,
            20281,
            28635,
            25001,
            26139,
            19054,
            14684,
            5892,
            2494,
            13543,
            10136,
            null,
            9131,
            9131,
            9281,
            4196,
            29294,
            53762,
            16322,
            16322,
            9218,
            6537,
            9191,
            16133,
            10611,
            7584,
            24934,
            null,
            10949,
            54747,
            null,
            11674,
            null,
            45336,
            20759,
            1314,
            null,
            6250,
            // 8223,
            // 9046,
            // null,
            // null,
            // 5842,
            // 7441,
            // 19031,
            // 10029,
            // 3927,
            // 5167,
            // null
          ],
          "本年商品房销售额（万元）": [
            null,
            null,
            null,
            7021,
            5901,
            34967,
            null,
            5444,
            10752,
            15430,
            12725,
            15616,
            7544,
            8834,
            3895,
            1271,
            10907,
            5941,
            null,
            5827,
            5827,
            4685,
            1150,
            13551,
            20130,
            7915,
            7915,
            2725,
            3784,
            5218,
            9400,
            6389,
            4461,
            8055,
            null,
            8177,
            15322,
            null,
            6966,
            null,
            30299,
            12029,
            795,
            null,
            3409,
            5185,
            5361,
            null,
            null,
            3157,
            2723,
            10332,
            7534,
            2072,
            3539,
            null
          ]
        },
        yLabel: ''
      },
      headers: ["企业名称", "产值"],
      tableData: [
        {
          selectId: 1,
          list: [
            ["甘肃大禹节水集团水利水电工程有限责任公司", 2281215],
            ["甘肃建投十建建设有限公司", 1551396],
            ["甘肃金佛寺建设工程有限公司", 365793],
            ["甘肃省交通战备公路工程总队有限公司", 310767],
            ["甘肃玉融建设集团有限公司", 210150],
            ["酒泉通达路桥有限责任公司", 150019],
            ["甘肃诚泰路桥工程有限公司", 143732],
            ["酒泉新航建筑工程有限责任公司", 142966],
            ["甘肃泽瑞亿通建设工程有限公司", 98544],
            ["酒泉明珠建业有限公司", 96850],
            ["酒泉登格建业有限公司", 89893],
            ["甘肃恒宇建筑安装有限责任公司", 80325],
            ["酒泉市旭升建设工程有限公司", 77987],
            ["酒泉市果园建筑工程有限责任公司", 76741],
            ["甘肃泉湖建业有限公司", 73675],
            ["甘肃大泽建设工程有限公司", 17185],
            ["酒泉市兴达建筑安装工程有限公司", 70896],
            ["甘肃建投河西生态建设有限公司", 70550],
            ["甘肃晟玮建设工程有限公司", 7017],
            ["酒泉市金裕建业有限公司", 70000],
            ["酒泉金源建业有限公司", 67650],
            ["酒泉德顺建业有限责任公司", 67180],
            ["酒泉广厦建业有限责任公司", 66417],
            ["酒泉市坤水利水电工程有限公司", 64991],
            ["酒泉鹏翔路桥工程有限公司", 63540],
            ["酒泉市福华建业有限责任公司", 60503],
            ["酒泉市光明建业有限责任公司", 59551],
            ["酒泉鑫隆建筑安装工程有限公司", 57819],
            ["酒泉市龙腾水电工程有限责任公司", 57210],
            ["酒泉市怀茂建筑安装工程公司", 57085],
            ["酒泉北方建筑工程有限责任公司", 50510],
            ["甘肃恒信建设集团有限公司", 50155],
            ["甘肃山河秀设工程有限公司", 49463],
            ["甘肃酒泉中泰伟业建筑路桥工程有限公司", 49004],
            ["甘肃辉鸿建筑安装有限公司", 43966],
            ["甘肃兴宇建设工程有限公司", 41688],
            ["甘肃天顺恒晟建设工程有限公司", 41387],
            ["甘肃隆宏宏威建设工程有限公司", 39609],
            ["酒泉市兴厦建业有限责任公司", 38134],
            ["酒泉市第三建筑安装工程公司", 37957],
            ["甘肃润峰顺建筑工程有限公司", 37599],
            ["甘肃金禾建设工程有限公司", 37939],
            ["甘肃宜鑫建设集团有限公司", 37771],
            ["甘肃瑞龙工程建设有限公司", 37122],
            ["酒泉华强机电有限公司", 36947],
            ["酒泉顺丰建业有限公司", 38911],
            ["酒泉市三元水电开发有限公司", 35640],
            ["酒泉恒基建筑有限公司", 34480],
            ["甘肃昌鑫建设工程有限公司", 34400],
            ["甘肃正合建设工程有限公司", 32506],
            ["甘肃恒银水电工程有限公司", 30809],
            ["甘肃闰博建设工程有限公司", 29067],
            ["甘肃浩峪电力有限公司", 28903],
            ["酒泉市康盛建业有限责任公司", 28400],
            ["甘肃金晟路桥建设工程有限责任公司", 27666],
            ["酒泉国晟建设工程集团有限公司", 27637],
            ["甘肃明峰建设工程有限公司", 27579],
            ["酒泉市恒源市政工程有限责任公司", 26852],
            ["甘肃天栋建设工程有限公司", 26000],
            ["酒泉润博建设工程有限责任公司", 26052],
            ["酒泉市金盛建设工程有限公司", 24548],
            ["酒泉空间网架钢结构有限公司", 24000],
            ["酒泉市天诚建业有限公司", 21175],
            ["酒泉吉鑫建筑安装工程有限公司", 21115],
            ["甘肃东艺世纪装饰工程有限责任公司", 21094],
            ["酒泉中海水利水电有限公司", 20852],
            ["酒泉欧祥工程建设有限责任公司", 18750],
            ["甘肃盛庆恒建建筑工程有限责任公司", 18466],
            ["酒泉恒厦建设工程有限责任公司", 18379],
            ["酒泉四方建设工程有限公司", 17224],
            ["甘肃锦铴工程建设有限公司", 15116],
            ["甘肃福禄泽建设工程有限公司", 14412],
            ["甘肃昊烨建设工程有限公司", 14264],
            ["酒泉肃州区投建承建建设有限责任公司", 13890],
            ["甘肃路路桥建设工程有限公司", 11832],
            ["甘肃圣诺建筑工程有限公司", 11279],
            ["酒泉广安市政工程有限公司", 10670],
            ["酒泉泉鑫建业有限公司", 10000],
            ["甘肃通和高新建设发展有限公司", 9870],
            ["甘肃显水建设工程有限公司", 9694],
            ["酒泉市永和建业有限公司", 8986],
            ["酒泉荣泰建设工程有限公司", 8892],
            ["甘肃美林建设工程有限公司", 8000],
            ["甘肃荣腾装饰工程有限责任公司", 7774],
            ["酒泉顺凯水利水电工程有限公司", 7692],
            ["甘肃睿智市政建设有限公司", 7668],
            ["酒泉中天建设工程有限公司", 7448],
            ["酒泉锦鑫市政建设有限公司", 7275],
            ["酒泉市和筑建筑工程有限责任公司", 6996],
            ["酒泉市祺洪工程建设有限公司", 6907],
            ["酒泉盛航建设工程有限公司", 6000],
            ["甘肃长和市政建设有限公司", 5580],
            ["甘肃翰风方世建设工程有限公司", 5310],
            ["酒泉市鸿泰园林科技开发有限公司", 4850],
            ["酒泉市春光建业有限责任公司", 4660],
            ["甘肃艺格建设工程有限公司", 4578],
            ["甘肃福淼创景建筑有限公司", 4481],
            ["酒泉祁电电力工程有限公司", 4000],
            ["酒泉金泰建设工程有限公司", 3799],
            ["酒泉金益建设工程有限公司", 3640],
            ["甘肃兴晟建设工程有限公司", 3473],
            ["甘肃盛达丰建设工程有限公司", 2991],
            ["甘肃昊弘润建筑工程有限公司", 2973],
            ["甘肃昌瑞百佳建筑工程有限公司", 2812],
            ["甘肃亦辰工程建设有限公司", 2715],
            ["酒泉鸿安工程建设有限公司", 2310],
            ["酒泉市嘉宏装饰工程有限公司", 2158],
            ["甘肃诚嘉建业有限公司", 1151],
            ["酒泉市金厦建业有限公司", 1049],
            ["甘肃荣洲建设工程有限公司", 698],
            ["酒泉市宏厦建业有限公司", 500],
            ["酒泉市芨芨水利水电工程有限公司", 1],
            ["甘肃锦鼎工程有限公司", null],
            ["甘肃天洋工程建设有限责任公司", null],
            ["酒泉拓帆工程有限责任公司", null],
            ["酒泉市锦源建业有限公司", null],
            ["酒泉市三利水电机械有限责任公司", null],
            ["酒泉天成水利水电工程有限公司", null],
            ["甘肃珺豪建设工程有限公司", null],
            ["酒泉永丰建设工程有限公司", null],
            ["酒泉圣坤建业有限公司", null]
          ]
        },
      ],
      tabId: 1,
      touristList: {
        xData: [
          "5A",
          "4A",
          "3A",
          "2A",
          "A",
        ],
        yData: {
          '级旅游景区': [
            0,   //
            5,    //
            8,    //
            2,    //
            0,   //
          ],
        },
        yLabel: '单位：个'
      },
      tableData2: [
        {
          selectId: 1,
          list: [
            ["西汉酒泉胜迹", "4A", "2002", "405", "46"],
            ["酒泉天宝景区", "4A", "2018", "87", "45"],
            ["酒泉生态文化博览园", "4A", "2022", "475", "450"],
            ["祁连苇海景区", "4A", "2012", "10000.5", "30"],
            ["酒泉酒文化博览园", "4A", "2021", "300", "21"],
            ["花城湖生态旅游景区", "3A", "2002", "4075", "20"],
            ["常青苑", "3A", "2006", "195", "10"],
            ["酒泉民俗博物馆", "3A", "2014", "69", "5"],
            ["肃州区黄泥堡裕固族风情小镇", "3A", "2023", "45", "8"],
            ["肃州区龙德盛生态农业博览园", "3A", "2021", "636", "30"],
            ["酒泉1969文化艺术博览园", "3A", "2022.6", "98", "89"],
            ["大法幢寺", "3A", null, "110", "6"],
            ["肃州区丝路花旅景区", "3A", "2022", "2600", "15"],
            ["酒泉天马湖景区", "3A", "2023", "694.5", "15"],
            ["玉湖景区", "2A", "2013", "1800", "45"],
            ["酒泉起义纪念馆", null, "2013", "350", "6"],
            ["马营河生态探险旅游景区", null, "2016", "979.8", null],
            ["铧尖镇荷塘月色景区", null, "2022", "40", "10"],
            ["下河清紫金生态文化苑", null, "2019", "21", "0"],
            ["东洞镇旧沟村瑞雪景园景区", null, "2022", "46", "5"],
            ["总寨镇明珠风情苑餐饮休闲度假区", null, "2022", "186", "30"],
            ["福地民俗观光体验园", null, "2022", "43.4", "3"],
            ["肃州区丰乐镇台子沟杏林景区", null, "2021", "1200", "10"],
            ["魏家湾民俗文化街", null, null, "50", "20"],
            ["临水堡特色小镇", null, "2022", "400", "0"],
            ["洪水河大峡谷旅游景区", null, "2019", "375", "5"]
          ]
        },
      ],
      artifactList: {
        xData: [
          "不可移动文物点",
          "博物馆纪念馆",
          "全区不可移动革命文物",
        ],
        yData: {
          '文物保护': [
            331,
            15,
            5,
          ],
        },
        yLabel: '单位：个'
      },
      analysisOfTheBasicSituationOfCulturalHeritage: {
        xData: [
          "物质文化遗产",
          "非物质文化遗产"
        ],
        yData: {
          '文化底蕴': [
            345,
            123,
          ],
        },
        yLabel: '单位：个'
      },
      productList: {
        xData: [
          "地方特色产品",
          "地方特色小吃",
          "特产水果",
          "特产蔬菜",
          "特产畜禽、水产品",
          "特色农副产品",
          "文创产品",
        ],
        yData: {
          '特色产品': [
            12,
            8,
            15,
            16,
            9,
            30,
            74,
          ],
        },
        yLabel: '单位：个'
      },
      facilitiesList: {
        xData: [
          "标志性建筑物",
          "大型商超",
          "宾馆旅店",
        ],
        yData: {
          '区域设施': [
            10,
            12,
            178,
          ],
        },
        yLabel: '单位：个'
      },
      cityName: '',
      tooltipShow: false,
      toolList: []
    }
  },
  watch: {

  },
  methods: {
    //选择拿值
    changeSelect(e) {
      console.log(e)
    },
    async initChart(id) {
      if (!this.charts[id]) {
        this.charts[id] = this.$echarts.init(document.getElementById(id));
        this.charts[id].showLoading({
          text: '加载中',
          textColor: '#fff',
          maskColor: 'rgba(0,0,0,0)'
        })
        if (id === 'serviceMap') {
          this.charts[id].on('mouseover', (e) => {
            this.cityName = e.componentType === 'markPoint' ? e.data.cityName : e.name;
            let list = [
              {
                "tow": "西峰镇",
                "data": [
                  { "name": "服务业总产值", "value": 3000, "unit": "万元" },
                  { "name": "服务业税收", "value": 500, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "果园镇",
                "data": [
                  { "name": "服务业总产值", "value": 4500, "unit": "万元" },
                  { "name": "服务业税收", "极": 700, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 3, "unit": "个" }
                ]
              },
              {
                "tow": "银达镇",
                "data": [
                  { "name": "服务业总产值", "value": 6000, "unit": "万元" },
                  { "name": "服务业税收", "value": 1000, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 2, "unit": "个" }
                ]
              },
              {
                "tow": "泉湖镇",
                "data": [
                  { "name": "服务业总产值", "value": 5000, "unit": "万元" },
                  { "name": "服务业税收", "value": 850, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 3, "unit": "个" }
                ]
              },
              {
                "tow": "铧尖镇",
                "data": [
                  { "name": "服务业总产值", "value": 2500, "unit": "万元" },
                  { "name": "服务业税收", "value": 400, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "三墩镇",
                "极": [
                  { "name": "服务业总产值", "value": 5500, "unit": "万元" },
                  { "name": "服务业税收", "value": 900, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "极" }
                ]
              },
              {
                "tow": "黄泥堡乡",
                "data": [
                  { "name": "服务业总产值", "value": 1500, "unit": "万元" },
                  { "name": "服务业税收", "value": 250, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 1, "unit": "个" }
                ]
              },
              {
                "tow": "西洞镇",
                "data": [
                  { "name": "服务业总产值", "value": 2000, "unit": "万元" },
                  { "name": "服务业税收", "value": 350, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "总寨镇",
                "data": [
                  { "name": "服务业总产值", "value": 4800, "unit": "万元" },
                  { "name": "服务业税收", "value": 800, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "上坝镇",
                "data": [
                  { "name": "服务业总产值", "value": 4000, "unit": "万元" },
                  { "name": "服务业税收", "value": 600, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "东洞镇",
                "data": [
                  { "name": "服务业总产值", "value": 1800, "unit": "万元" },
                  { "name": "服务业税收", "value": 300, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "金佛寺镇",
                "data": [
                  { "name": "服务业总产值", "value": 2200, "unit": "万元" },
                  { "name": "服务业税收", "value": 400, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 1, "unit": "个" }
                ]
              },
              {
                "tow": "丰乐镇",
                "data": [
                  { "name": "服务业总产值", "value": 1700, "unit": "万元" },
                  { "name": "服务业税收", "value": 280, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "清水镇",
                "data": [
                  { "name": "服务业总产值", "value": 2600, "unit": "万元" },
                  { "name": "服务业税收", "value": 450, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              },
              {
                "tow": "下河清镇",
                "data": [
                  { "name": "服务业总产值", "value": 1900, "unit": "万元" },
                  { "name": "服务业税收", "value": 320, "unit": "万元" },
                  { "name": "A级旅游景区", "value": 0, "unit": "个" }
                ]
              }
            ];
            this.toolList = list.filter(item => item.tow.includes(this.cityName)).map(item => item.data)[0]
            this.tooltipShow = true
          });
          this.charts[id].on('mouseout', () => {
            this.tooltipShow = false;
          });
        }
      }
      let option = await this[id + 'Option']();
      this.charts[id].setOption(option);
      this.charts[id].hideLoading();
    },
    async serviceMapOption() {
      let dataList = [{
        cityName: '西峰镇',
        "coord": [
          "98.476123",//西峰
          "39.733162"
        ]
      }, {
        cityName: '总寨镇',
        "coord": [
          "98.669292",
          "39.656433"
        ]
      }, {
        cityName: '银达镇',
        "coord": [
          "98.571037",
          "39.803381"
        ]
      }, {
        cityName: '三墩镇',
        "coord": [
          "98.731518",
          "39.788872"
        ]
      }, {
        cityName: '铧尖镇',
        "coord": [
          "98.657341",//铧尖
          "39.717085"
        ]
      }, {
        cityName: '上坝镇',
        "coord": [
          "98.712407",//上坝
          "39.612822"
        ]
      },
      {
        cityName: '下河清',
        "coord": [
          "98.980462",//下河清
          "39.560477"
        ]
      },
      {
        cityName: '东洞镇',
        "coord": [
          "98.63409",//东洞镇
          "39.551714"
        ]
      }, {
        cityName: '西洞镇',
        "coord": [
          "98.459281",//西洞镇
          "39.65431"
        ]
      },
      {
        cityName: '黄泥堡乡',
        "coord": [
          "98.834582",//黄泥堡乡
          "39.71755"
        ]
      },
      {
        cityName: '金佛寺镇',
        "coord": [
          "98.780061",//金佛寺镇
          "39.425904"
        ]
      }, {
        cityName: '丰乐镇',
        "coord": [
          "98.897147",//丰乐镇
          "39.389238"
        ]
      }, {
        cityName: '清水镇',
        "coord": [
          "99.065828",//清水镇
          "39.365553"
        ]
      },
      {
        cityName: '果园镇',
        "coord": [
          "98.486738",//果园镇
          "39.786748"
        ]
      },
      ];
      let electricPileIcon = await staticImageToBase64(require('@/assets/images/theme-blue/runing.png'));
      let geoCoordMap = {};
      const geoJson = require('@/assets/geo/suzhouqu.json');
      this.$echarts.registerMap('szq', { geoJSON: geoJson });
      geoJson.features.forEach(function (v) {
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.centroid;
      });
      let size = '40%';
      let roam = false;
      let zoom = 3;
      return {
        geo: [{
          animationDuration: 0,
          animationDurationUpdate: 0,
          layoutCenter: ['50%', '55%'],//位置
          layoutSize: size,//大小
          show: true,
          map: 'szq',
          roam,
          zoom,
          aspectScale: 1,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          select: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            }
          },
          emphasis: {
            label: {
              color: '#fff'
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                type: "linear",
                x: 6000,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                },],
                global: true, // 缺省为 false
              },
              borderColor: "#c0f3fb",
              borderWidth: 1,
              shadowColor: "#8cd3ef",
              shadowOffsetY: 10,
              shadowBlur: 120,
            },
          }
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -1,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "56%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor:"rgba(17, 149, 216,0.6)",
              borderColor: "rgba(58,149,253,0.8)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -2,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "57%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(57, 132, 188,0.4)",
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "rgba(65, 214, 255,1)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -3,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "58%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(58,149,253,0.4)",
              shadowColor: "rgba(58,149,253,1)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
        }, {
          animationDuration: 0,
          animationDurationUpdate: 0,
          type: "map",
          map: 'szq',
          zlevel: -4,
          aspectScale: 1,
          zoom,
          layoutCenter: ["50%", "59%"],
          layoutSize: size,
          roam,
          silent: true,
          itemStyle: {
            normal: {
              borderWidth: 5,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "rgba(5,9,57,0.8)",
              shadowColor: "rgba(29, 111, 165,0.8)",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
        },],
        series: [
          {
            animationDuration: 0,
            animationDurationUpdate: 0,
            type: 'map',
            map: 'szq',
            geoIndex: 0,
            aspectScale: 1,//长宽比
            zoom,
            showLegendSymbol: true,
            roam,
            markPoint: {
              symbol: 'image://' + electricPileIcon,
              symbolSize: [26, 26],
              data: dataList,
            },
          },
        ],
      };
    },
  },
  beforeDestroy() {
    Object.keys(this.charts).forEach(item => {
      this.charts[item] && this.charts[item].dispose();
      this.charts[item] = null;
    })
  },
  async mounted() {
    Object.keys(this.charts).forEach(item => {
      this.initChart(item);
    });
  }
}
</script>

<style lang="scss" scoped>
.overall-page {
  position: relative;
  padding: 90px 20px 20px 20px;

  .overall-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 9;
  }

  .cusHeight {
    height: 260px;
  }

  .top-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-item {
      width: calc(29% - 10px);
    }

    .top-item1 {
      width: 42%;
      height: 550px;

      .map-tooltip {
        position: absolute;
        z-index: 9;
        background: #fff;
        width: 450px;
        height: 250px;
        right: 29%;
        bottom: 35%;
        background: url("~@/assets/images/theme-blue/common/monitoring-over-modal.png") no-repeat center;
        background-size: 100% 100%;

        .map-tooltip-title {
          display: flex;
          align-items: center;
          color: #29F1FA;
          font-family: fzhzgbjianti;
          font-size: 24px;
          padding-left: 20px;
          height: 60px;
        }

        .map-tooltip-content {
          width: 95%;
          margin: 0 auto;
          height: calc(100% - 85px);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .tooltip-item {
            width: calc(100% / 3 - 10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .value {
              display: flex;
              align-items: flex-end;
              margin-bottom: 10px;

              .number {
                font-weight: bold;
                font-size: 24px;
                color: #FFCB00;
              }

              .unit {
                color: #29F1FA;
                font-size: 13px;
              }
            }

            .label {
              color: #29F1FA;
            }
          }
        }
      }
    }

  }

  .info-block {
    width: 100%;

    .info-container {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 15px;

      .info-item:nth-child(3n) {
        margin-right: 0;
      }

      .info-item {
        width: calc((100% - 30px) / 3);
        margin-right: 15px;
      }
    }
  }
}
</style>
